<template>
  <div class="tab">
    <ul class="tab-tit">
      <li v-for="(item, $index) in textData" @click="tap($index)"><p>{{item.tit}}</p></li>
    </ul>
    <div class="line" :style="{width: lineWidth +'%', left: lineLeft+'%'}"></div>
    <ul v-if="request" class="tab-content">
      <li v-for="(item, $index) in textData" v-show="$index == cur"><p>{{item.textContent}}</p></li>
    </ul>
    <ul v-else class="tab-content">
      <li v-for="(item, $index) in textData" v-show="$index == cur"><p>{{item.textContent}}</p></li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    components: {
      reqData: {
        props: ['contCur', 'api', 'cache'],
        data () {
          return {
              infos: '',
              firstData: '',
              loaded: true
          };
        },
        template: '<div><div :class="{loaded: loaded}" class="infopage" v-html="contCur==0?firstData : infos"></div></div>'
      }
    },
    data () {
      return {
        cur: 0,
        textData: [
          {
            tit: '菜单1',
            textContent: '内容1'
          },
          {
            tit: '菜单2',
            textContent: '内容2'
          },
          {
            tit: '菜单3',
            textContent: '内容3'
          }
        ]
      };
    },
    methods: {
      tap: function (index) {
        this.cur = index;
      }
    },
    computed: {
      lineWidth: function () {
        return 100 / this.textData.length;
      },
      lineLeft: function () {
        return this.lineWidth * this.cur;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tab{
    width: 100%;
    position:relative;
    background-color: #fff;

    .tab-tit{
      display: flex;
      width: 100%;
      height:40px;
      box-sizing: border-box;
      border-bottom: 2px solid #eee;

      li {
        flex:1;
        height:40px;
        line-height: 40px;
        text-align: center;
        font-size:14px;
        cursor: pointer;
      }
      .active{
        color: #40B883;
      }
    }
  .line{
    position: absolute;
    top: 38px;
    left: 0;
    width: 33.33%;
    height: 2px;
    background-color: #ff5823;
  }
  .tab-content{
    width: 100%;

    li{
      width: 100%;
      padding: 10px;
      font-size:14px;
      line-height:20px;
    }
    .active{
      display: block;
    }
  }
}
</style>
